{% extends "base.html" %}
{% block script_base %}
{{ block.super }} <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/mustache.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/underscore-min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/backbone.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-twipsy.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-modal.js"></script>
<script type="text/javascript">
	$('body').ready(function() {
		$('.url-info-area .close').click(function() {
			$('input[_type="url"]').val('');
			$('.url-info-area p[_type="title"]').html('');
			$('.url-info-area small[_type="url"]').html('');
			$('.url-info-area .media-grid').html('');
			$('.url-info-area').hide();
			$('.url-input-area').show();
		});
		$('.url-input-area input[_type="get_cover"]').click(function() {
			var btn = $(this);
			btn.attr('disabled', 'disabled').val('抓取中...');
			var url = $('input[_type="url"]').val();
			$.ajax('/api/url/', {
				type : 'POST',
				data : {
					url : url
				},
				success : function(urlinfo) {
					btn.val('抓取图片').removeAttr('disabled');
					$('.url-input-area').hide();
					$('.url-info-area p[_type="title"]').html(urlinfo.title);
					$('.url-info-area small[_type="url"]').html(url);
					if(urlinfo.imgs) {
						var img_html_list = [];
						$.each(urlinfo.imgs, function(idx, img) {
							img_html_list.push('<li><a href="javascript:void(0);"><em></em><img class="thumbnail" src="' + img + '" /></a></li>');
						});
						$('.url-info-area .media-grid').html(img_html_list.join(''));
						$('.url-info-area .media-grid img').bind('error', function() {
							$(this).parents().filter('li').remove();
						}).bind('load', function() {
							if($(this).width() < 50) {
								$(this).parents().filter('li').remove();
							}
						});
					}
					$('.url-info-area').show();
				},
				error : function() {
					btn.val('抓取图片').removeAttr('disabled');
					//idit.app.error('抓取图片失败');
				}
			});
		});
	});

</script>
{% endblock %}
{% block content_base %}
<div class="row">
	<div class="span11">
		<form>
			<fieldset>
				<div class="clearfix" _type="text">
					<textarea class="xxlarge" name="text" _type="text" rows="3" placeholder="说点什么..."></textarea>
				</div>
				<div class="clearfix">
					<div class="url-input-area">
						<input class="xxlarge" type="text" name="url" _type="url" placeholder="http://" />
						<input type="button" class="btn" _type="get_cover" value="抓取图片" />
					</div>
					<div class="url-info-area" style="display:none;">
						<a href="javascript:void(0);" class="close">x</a>
						<blockquote>
							<p _type="title"></p>
							<small _type="url"></small>
							<div class="url-pics">
								<ul class="media-grid"></ul>
							</div>
						</blockquote>
					</div>
				</div>
				<div class="clearfix ta_rt">
					<input type="button"  class="btn primary" value="Dit" />
				</div>
			</fieldset>
		</form>
	</div>
	<div class="span5">
		ss
	</div>
</div>
{% endblock %} 